import React, { useState, useEffect, useReducer, createContext } from 'react'
// createContext创建上下文
import { initState, reducer } from '../store/modules/user'
import axios from 'axios'
import Child2Child from './Child2Child'
// useState的作用是在函数组件中使用state
// useEffect的作用是在函数组件中使用生命周期函数，主要是componentDidMount、componentDidUpdate、componentWillUNmount，可以认为是页面渲染（render）后会执行的一个函数
// useReducer的作用是在函数组件中使用redux相关功能

// 使用createContext，在多级组件中传递数据
export const myContext = createContext()
export default function HookChild2() {
  let [count, setCount] = useState(0);
  let [food, setFood] = useState('hotpot');
  let [date, setDate] = useState(new Date());
  // useState(0)是一个函数，参数是数据的默认值
  // 函数有两个返回值，第一个数据本身
  // 第二个返回值是修改数据的方法

  useEffect(() => {
    // 自动更新页面的title
    // 第一个参数是render后自动执行的代码。相当于render的副作用
    // 第二个参数是依赖项，或者更新条件.
    // 如果不写这个参数，那就每次数据变化都会触发；如果数组中有值，只有当这个值变化时，才触发；如果是空数组，数据变化不会触发
    document.title = `点击${count}次`;
    // 添加定时器
    let timer = setInterval(() => {
      setDate(new Date())
    }, 1000);
    // return的作用是在componentWillUNmount的时候清楚定时器等需要释放的内容
    return () => {
      clearInterval(timer)
    }
  }, [count])

  // 第二个参数是空数组，useEffect就相当于componentDidMount
  useEffect(() => {
    // 需要先导入axios
    // axios.get('/sdfsd/sdf')
    //   .then(res => {
    //     // 更新数据，而且是更新store中的数据
    //     dispatch({type: 'changeInfo', info: {username: res.xx.xx}})
    //   })
  }, [])


  // 使用useReducer
  const [state, dispatch] = useReducer(reducer, initState);
  return (
    <div>
      <p>点击次数：{count}</p>
      <button onClick={() => { setCount(count + 1) }}>+1</button>
      <hr></hr>
      <p>我的午饭：{food}</p>
      <button onClick={() => { setFood('rice') }}>想吃rice</button>
      <hr></hr>
      <p>{date.toLocaleTimeString()}</p>
      <hr></hr>
      <p>用户名：{state.info.username}</p>
      <button onClick={() => dispatch({ type: 'changeInfo', info: { username: 'aaa' } })}>修改名字</button>
      <hr></hr>
      <myContext.Provider value={food}>
        {/* myContext作为父组件，Provider用来提供数据，value的值就是要传递的数据 */}
        <Child2Child></Child2Child>
      </myContext.Provider>
    </div>
  )
}
